<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<%!    String suite = "";

    public String getQuestions(String suite) {
        return "How are you?";
    }
%>
<script type="text/javascript">
    var i = 1;
function addRows(){
      var TABLE = document.getElementById('ansTable');
      var BODY = TABLE.getElementsByTagName('tbody')[0];
      var TR = document.createElement('tr');
      var TD = document.createElement('td');
      var CB = document.createElement('input');
      CB.setAttribute("type", "checkbox");
      CB.setAttribute("name", "rightans");
      CB.setAttribute("value", "ans" + (i++));
      TD.appendChild(CB);
      TR.appendChild (TD);

      var TD = document.createElement('td');
      var INPUT = document.createElement('input');
      INPUT.setAttribute("name", "answer" + (++i));
      INPUT.setAttribute("type", "text");
      INPUT.setAttribute("class", "content");
      TD.appendChild(INPUT);
      TR.appendChild (TD);
      BODY.appendChild(TR);
 }
</script>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
            <title>Creating tests</title> 
            <link rel="stylesheet" href="style/style.css" type="text/css" />
            <link rel="stylesheet" href="style/tabs.css" type="text/css" media="screen, projection"/>

	<script type="text/javascript" src="style/jquery-1.3.2.min.js"></script>
	<script type="text/javascript" src="style/jquery-ui-1.7.custom.min.js"></script>
    <script type="text/javascript">
		$(function() {

			var $tabs = $('#tabs').tabs();
	
			$(".ui-tabs-panel").each(function(i){
	
			  var totalSize = $(".ui-tabs-panel").size() - 1;
			});
	
			$('.next-tab, .prev-tab').click(function() { 
		           $tabs.tabs('select', $(this).attr("rel"));
		           return false;
		       });
       

		});
    </script>
    </head>
    <body>
        <img id="hat" src="style/brainImg.jpg" />
        <h1>Editing tests</h1>
<!-- ------------------------------------------------------------------------ -->
	<div id="tabs">
		
    		<ul>
        		<li><a href="#fragment-1">1</a></li>
        		<li><a href="#fragment-2">2</a></li>
        		<li><a href="#fragment-3">3</a></li>
    	   </ul>
	
        	<div id="fragment-1" class="ui-tabs-panel">
        	       <%
            if (request.getParameter("ok") != null)
                if (!request.getParameter("test").isEmpty() | !request.getParameter("testsuit").equals("") | !suite.isEmpty()) {
                    suite = request.getParameter("test") + request.getParameter("testsuit");
                                   
        %>
        <h3> A list of questions: </h3>
        <table border="1">
            <tr>
                <td>№</td>
                <td>Questions</td>
                <td>Answers</td>
                <td>Theme</td>
                <td>Test type</td>
            </tr>
            <tr>
                <td> 1 </td>
                <td> <% out.println(getQuestions(suite));%> </td>
                <td> <table><tr><td>1)Yes</td></tr><tr><td>2)No</td></tr></table></td>
                <td>Life</td>
                <td>Yes-No question</td>
            </tr>
            
        </table>
        <form action="main.jsp" name="addquest" method="get">
            <button type="submit" name="add" value="AddQuestion" onClick="">Add</button>
        </form>
        <% }
            if (request.getParameter("add") != null) {
        %>
        <h3> A list of questions: </h3>
        <table border="1">
            <tr>
                <td>№</td>
                <td>Questions</td>
                <td>Answers</td>
                <td>Theme</td>
                <td>Test type</td>
            </tr>
            <tr>
                <td> 1 </td>
                <td> <% out.println(getQuestions(suite));%> </td>
                <td> <table><tr><td>1)Yes</td></tr><tr><td>2)No</td></tr></table></td>
                <td>Life</td>
                <td>Yes-No question</td>
            </tr>
            
        </table>
        <form action="main.jsp" name="addquest" method="get">
            <button type="submit" name="add" value="AddQuestion" onClick="">Add</button>
        </form>
        <div class="block">       
        Question:
        <form action="main.jsp" name="newquest" method="get">
            <textarea name="question" rows="3" cols="100" placeholder="Enter a new question" style="width: 90%"></textarea>
            <p>Theme: <input type="text" name="theme" placeholder="enter a theme" /></p>
            <p>Type: <input type="text" name="type" placeholder="enter a type" /></p>
            Enter answers and point the right ones:
            <table id="ansTable">
              <tr>
                  <td class ="check"><input type="checkbox" name="rightans" value="ans1" /></td>
                  <td><input type="text"  name="answer1" class ="content" /> </td>
              </tr>
           </table>
          <input type="button" onclick="addRows();" value="Add Answer" /> <br />
                </div>
          <input type="submit" value="Send"/>
        </form>
        <%                               }
           
        %>  
        	</div>
        	
        	<div id="fragment-2" class="ui-tabs-panel ui-tabs-hide">
                </div>
            
        	<div id="fragment-3" class="ui-tabs-panel ui-tabs-hide">
            	  </div>
        </div>
		
<!-- ------------------------------------------------------------------------ -->
        <form action="main.jsp" name="newtest" method="post">
            Enter a new name suit name:
            <input type="text" name="test" />
            
                or choose from existing ones:
                <select name="testsuit">
                    <option value=""></option>
                    <option value="1"> test </option> 
                </select>
            
            <button type="submit" name="ok">OK</button>
        </form> 
      <!-- </p> 
       
       <h2>SomeThing </h2>
    <p>Io-ho-ho and a bottle of rome</p>
    
</div>--> 
        
        
    </body>
</html>
